import React from 'react';
// import { connect } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Button, Space, Modal ,Typography} from 'antd';
import { ColumnsType } from 'antd/es/table';
import { PrinterOutlined } from '@ant-design/icons';
import QuotationSearch from './QuotationSearch';
import QuotationUpdate from './QuotationUpdate';
import TableScroll from "@/components/TableScroll";
import styles from './styles.less'
const {Text} = Typography;

interface User {
  key: number;
  name: string;
  totalPrice:string;  

}
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      defaultParams: {},
      params: {},
      selectedKeys: [],
      pageNumber: 1,
      pageSize: 10,
      list: [],
      visible: false,
      formVals: {},
      editStatus: false,
    };
  }
  // componentDidMount，（装载完成），在render之后调用
  componentDidMount() {
    this.query();
  }
  query() {
    //接口，获取报价单list
    this.setState({
      list: [
        {
          id: '1',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '2',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '3',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '4',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '5',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '6',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '7',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '8',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '9',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '10',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '11',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '12',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '13',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '14',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '15',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
        {
          id: '16',
          cailiao: '塑料',
          cost: '45',
          count: '5',
          time: '3',
          timePrice: '15',
          price: '600',
          totalPrice: '1000',
        },
      ],
    });
  }
  handlePageChange = (pageNumber: any, pageSize: any) => {
    this.setState({
      pageNumber,
      pageSize,
    });
  };

  handleSearch = (values: any) => {
    this.setState(
      {
        params: { ...values },
        pageNumber: 1,
      },
      this.query,
    );
  };
  /**
   * 控制更新模态框显示
   * @param {boolean} visible 是否显示
   * @param {object} formVals 模态框默认值
   * @param {boolean} editStatus 是否编辑模式
   */
  switchVisible = (visible = false, formVals = {}, editStatus = false) => {
    this.setState({
      visible,
      formVals,
      editStatus,
    });
  };
  /**
   * 控制新增，编辑事件
   */
  handleSubmit = async (values: any) => {
    const { editStatus } = this.state;
    // const { dispatch } = this.props;
    if (editStatus) {
      // await dispatch({
      //   type: '#/edit',
      //   payload,
      // });
    } else {
      // await dispatch({
      //   type: '#/add',
      //   payload,
      // });
    }
    this.switchVisible();
    this.query();
  };
/**
 * 删除指定报价单
 * 
 */
   handleDelete = (id:any) => {
     const { dispatch } = this.props;
     return
    dispatch({
      type: 'company/delete',
      payload: {
        id
      },
    }).then(() => {
      this.query();
    });
  };
  handleExport = () => {
    const { dispatch } = this.props;
    const { defaultParams, params, pageNumber, pageSize } = this.state;
    Modal.confirm({
      title: '请注意',
      content: '导出当前数据！',
      maskClosable: true,
      cancelText: '取消',
      okText: '导出',
      onOk: () => {
        return;
        dispatch({
          type: 'echeck/exportList',
          payload: {
            pageNumber,
            pageSize,
            ...defaultParams,
            ...params,
          },
        });
      },
    });
  };
  render() {
    const columns: ColumnsType<User>= [
      {
        title:'序号',
        key:'index',
        width:60,
        render:(_:any,__:any,i:any)=>i+1
      },
      {
        title: '物料编码',
        dataIndex: 'id',
        width:100,
      },
      {
        title: '物料',
        width:100,
        dataIndex: 'cailiao',
      },
      {
        title: '成本单价（元）',
        width:140,
        dataIndex: 'cost',
      },
      {
        title: '数量（个）',
        width:120,
        dataIndex: 'count',
      },
      {
        title: '工时（小时）',
        width:120,
        dataIndex: 'time',
      },
      {
        title: '工时单价（元）',
        width:140,
        dataIndex: 'timePrice',
      },
      {
        title: '杂项费用（元）',
        width:140,
        dataIndex: 'price',
      },
      {
        title: '总价（元）',
        fixed: "right",
        dataIndex: 'totalPrice',
      },
    ];
    const components={
      table(props:any){
        return (
          <TableScroll style={{width:'100vw',height:'650px'}}>
              <table>
              { props.children }
              </table>
          </TableScroll>
      )
      }
    }
    const { defaultParams = {}, list, visible, formVals, editStatus } = this.state;
    return (
      <PageHeaderWrapper title={false}>
        <Card  >
          <QuotationSearch defaultParams={{ ...defaultParams }} onSearch={this.handleSearch}>
            <Space>
              <Button icon={<PrinterOutlined />}>打印预览</Button>
            </Space>
          </QuotationSearch>
          <Table
          className={styles.tableScroll}
          rowKey="id"
          size="small"
            columns={columns}
            dataSource={list}
            // components={components }
            scroll={{ x:'max-content' }}
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              onChange: this.handlePageChange,
              onShowSizeChange: this.handlePageChange,
            }}
            summary={list => {
              let total = 0;
      
              list.forEach(({ totalPrice }) => {
                total += parseFloat(totalPrice);
              });
      
              return (
                <>
                  <Table.Summary.Row>
                    
                  <Table.Summary.Cell index={0}></Table.Summary.Cell>
                    <Table.Summary.Cell index={1}></Table.Summary.Cell>
                    <Table.Summary.Cell index={2}></Table.Summary.Cell>
                    <Table.Summary.Cell index={3}></Table.Summary.Cell>
                    <Table.Summary.Cell index={4}></Table.Summary.Cell>
                    <Table.Summary.Cell index={5}></Table.Summary.Cell>
                    <Table.Summary.Cell index={6}></Table.Summary.Cell>
                    <Table.Summary.Cell index={7}>合计：</Table.Summary.Cell>
                    <Table.Summary.Cell index={8}>
                      <Text type="danger">{total}</Text>
                    </Table.Summary.Cell>
                  </Table.Summary.Row>
                  
                </>
              );
            }}
          />
        </Card>
        <QuotationUpdate
          visible={visible}
          formVals={formVals}
          editStatus={editStatus}
          onCancel={this.switchVisible}
          onSubmit={this.handleSubmit}
        />
      </PageHeaderWrapper>
    );
  }
}
export default ViewPage;
